import React from 'react';
import { connect } from 'dva';
import { Card,Spin } from 'antd'


import { IECharts } from '../../../components'
const RealisationSummaryCharts = ({
    list = [],
    colors = ['#97B9DC', '#D0021B']
}) => {

    const theList=JSON.parse(JSON.stringify(list))

    theList.map(item=>{
        item.ratio=Math.round(item.ratio*10000)/100
    })

    // list.sort((a,b)=>Date.parse(a.time) - Date.parse(b.time))

    theList.sort((a,b)=>{

        return (a.time.split('+')[1]||0)-(b.time.split('+')[1]||0)
    })

    


    const myProps = {
        option: {
            color:colors,
            tooltip: {
                trigger: 'axis',
                formatter: (p) => {
                    return `${p[0].axisValue}<br />${p[0].seriesName}：${p[0].value}亿元<br />${p[1].seriesName}：${p[1].value}%`
                },
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                }
            },
            // legend: {
            //     data: ['变现额', '变现比例'],
            //     bottom: 0,
            //     textStyle: {
            //         color: '#999',
            //     }
            // },
            legend: {
                data: ['变现额', '变现比例'],
                bottom: 0,
                right:0,
                textStyle: {
                    // color: '#999',
                    color: '#4a4a4a',
                    fontSize:'14px',
                    lineHeight:'20px'
                }
            },
            xAxis: [
                {
                    type: 'category',
                    data: theList.map(item=>item.time),
                    axisPointer: {
                        type: 'shadow'
                    },
                    splitLine: { show: false },
                    axisLine: { show: false },
                    axisTick: { show: false },
                    axisLabel: {
                        show: true,
                        // color: '#999',
                        // fontSize: 12,
                        color: '#4a4a4a',
                        fontSize: 14,
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '变现额/亿元',
                    nameTextStyle: {
                        color: '#999',
                        fontSize: 12,
                        padding: [10, 0, 8, 70]
                    },
                    splitLine: { show: false },
                    axisLine: { show: false },
                    axisTick: { show: false },
                    axisLabel: {
                        show: true,
                        // color: '#999',
                        // fontSize: 12,
                        color: '#4a4a4a',
                        fontSize: 14,
                    }
                },
                {
                    type: 'value',
                    name: '变现比例',
                    nameTextStyle: {
                        // color: '#999',
                        // fontSize: 12,
                        color: '#4a4a4a',
                        fontSize: 14,
                        padding: [10, 60, 8, 0]
                    },
                    splitLine: { show: false },
                    axisLine: { show: false },
                    axisTick: { show: false },
                    axisLabel: {
                        show: true,
                        // color: '#999',
                        // fontSize: 12,
                        color: '#4a4a4a',
                        fontSize: 14,
                        formatter: '{value} %'
                    }
                }
            ],
            series: [
                {
                    name: '变现额',
                    type: 'bar',
                    data: theList.map(item=>item.money)
                },
                {
                    name: '变现比例',
                    type: 'line',
                    yAxisIndex: 1,
                    data:  theList.map(item=>item.ratio)
                }
            ]
        }
    }
    return (
        <div style={{ height: 330 }}>
            <IECharts {...myProps}  resizable={true} />
        </div>
    )
}


//备用函数
//fetchData  查询数据
class RealisationSummary extends React.Component {
    state = {
        data: this.props.realisationSummary,
    }

    componentDidMount() {
        this.fetchData(this.props)
    }
    componentWillReceiveProps(nextProps) {

        if ((nextProps.lPortId !== this.props.lPortId) || (nextProps.date !== this.props.date)) {
            this.fetchData(nextProps)
        }
        if (nextProps.realisationSummary !== this.props.realisationSummary) {
            
            this.setState({
                data: nextProps.realisationSummary,
            })
        }

    }
    fetchData = (props) => {
        this.setState({
            data: {}
        })
        props.dispatch({
            type: 'combinatorialAnalysis/getRealisationSummary',
            payload: props
        })
    }

    render() {
        
        return (
            <div className="realisationSummary">
            {
                Object.keys(this.state.data).length ?<RealisationSummaryCharts {...this.state.data} />:<Spin />
            }
                
            </div>
        );
    }
}

RealisationSummary.defaultProps = {
    lPortId: null,
    lastDate: null,
    realisationSummary: {
        // fieldList: [
        //     {
        //         id: "time",
        //         name: "时间"
        //     },
        //     {
        //         id: "money",
        //         name: "变现额"
        //     },
        //     {
        //         id: "ratio",
        //         name: "变现比例"
        //     }
        // ],
        // list: [
        //     {
        //         time: 'T',
        //         money: 0.33,
        //         ratio: 0.38
        //     }
        // ]
    }
}
export default connect()(RealisationSummary)